<html>
<body>
    <style>
        .mag{
            margin: 24px 0;
        }
    </style>
    <div class="mag">
        说明  : 先把格式转成图片 然后呢在把图片 转成PDF 格式  
    </div>

    <input   type="file" id="imageUpload" accept="image/*"> <br>
    <input  class="mag" type="text" id="watermarkText"> <br>
    <button   onclick="addWatermark()">添加水印并下载</button>
    <input type="number" id="fontSize" min="1" value="12" >
    <canvas  id="canvas" style="display:none;"></canvas>
    <img  id="imageWithWatermark" />
    <button id="rotateButton">旋转图片</button>
    <input type="color" id="fontColor" name="fontColor" value="#000000">

    <div  style="   margin:24px 0; ">
      图片转 PDF
        <input type="file" id="myImage" accept="image/*">
        <button id="download" >转换为PDF</button>
    </div>

    <div>
        PDF 转 图片 
        <input type="file" id="myPDF" accept="application/pdf">
    <button id="convert">转换为图片并下载</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
    
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas"></script>
<script>
    var rotateAngle = 0;

document.getElementById('rotateButton').addEventListener('click', function() {
    var img = document.getElementById('imageWithWatermark');
    rotateAngle += 45;
    img.style.transform = 'rotate(' + rotateAngle + 'deg)';
});

    function addWatermark() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');  

    var img = new Image();
    img.src = URL.createObjectURL(document.getElementById('imageUpload').files[0]);
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
 
        ctx.fillStyle = document.getElementById('fontColor').value;  
        var fontSize = document.getElementById('fontSize').value;
ctx.font = fontSize + 'px serif';
        ctx.save();

        var stepHeight= 100; 
        var y = 0;
        while (y < canvas.height){
            var n;
            if ((y/stepHeight) % 2 == 0){ 
                n = 4;
            } else { 
                n = 2;  
            }

            var stepWidth = canvas.width/(n+1); // 计算每行的水印间距
            for (var x=stepWidth/2; x < canvas.width; x += stepWidth) { // 从中间开始放置水印
                ctx.save(); 
                ctx.translate(x, y + stepHeight/2);  
                ctx.rotate(-Math.PI / 4); 
                ctx.fillText(document.getElementById('watermarkText').value, 0, 0);
                ctx.restore();
            }
            y += stepHeight;
        }

        ctx.restore();

        var imageWithWatermark = canvas.toDataURL('image/png');
        document.getElementById('imageWithWatermark').src = imageWithWatermark;
        
        var link = document.createElement('a');
        link.download = 'image_with_watermark.png';
        link.href = document.getElementById('imageWithWatermark').src;
        link.click();
    };
}



    document.getElementById('download').addEventListener('click', function() {
    let file = document.getElementById('myImage').files[0];
    let reader = new FileReader();
    
    reader.onloadend = function() {
        let pdf = new jsPDF('p', 'mm', 'a4'); 
        pdf.addImage(reader.result, 'JPEG', 0, 0);
        pdf.save('download.pdf');
    }

    if (file) {
        reader.readAsDataURL(file);
    }
});


document.getElementById('convert').addEventListener('click', function() {
    var file = document.getElementById('myPDF').files[0];
    var reader = new FileReader();
    
    reader.onloadend = function() {
        var loadingTask = pdfjsLib.getDocument({data: reader.result});
        loadingTask.promise.then(function(pdf) {
            return pdf.getPage(1).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});

                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                return page.render({canvasContext: context,
                                    viewport: viewport})
                .promise.then(function() {
                    return new Promise(function(resolve) {
                        canvas.toBlob(function(blob) {
                            var link = document.createElement('a');
                            link.href = window.URL.createObjectURL(blob);
                            link.download = 'image.png';
                            link.click();

                            resolve(); // Resolve the promise after the image has been downloaded
                        }, 'image/png');
                    });
                });
            });
        });
    }

    if (file) {
        reader.readAsArrayBuffer(file);
    }
});
</script>
</body>
</html>